<template>
	<view class="MainBox">
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">←</view>
			<view class="page-title">家属信息</view>
		</view>
		<view class="contact-list">
			<view class="PersonalInformation" v-for="(contact, index) in contactList" :key="index">
				<view class="inputItem">
					<view class="textBox">姓名</view>
					<view class="text">{{ contact.name }}</view>
				</view>
				<view class="inputItem">
					<view class="textBox">关系</view>
					<view class="text">{{ contact.relation }}</view>
				</view>
				<view class="inputItem">
					<view class="textBox">电话</view>
					<view class="text">{{ contact.phone }}</view>
				</view>
				<view class="inputItem">
					<view class="textBox">家庭住址</view>
					<view class="text">{{ contact.address }}</view>
				</view>
				<view class="delete-btn" @click="deleteContact(index)">
					<text class="delete-icon">×</text>
				</view>
			</view>
		</view>

		<!-- 空状态提示 -->
		<view class="empty-state" v-if="contactList.length === 0">
			<text class="empty-text">暂无联系人</text>
			<text class="empty-tip">点击下方按钮添加联系人</text>
		</view>
	</view>
	<view class="editBar">
		<button class="editBtn add-btn" @click="addContact">新增</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contactList: [{
						name: '李**',
						relation: '母女',
						phone: '17400001111',
						address: '德阳市罗江区...路...号'
					},
					{
						name: '张**',
						relation: '祖孙',
						phone: '17299992222',
						address: '重庆市...路...号'
					}
				]
			}
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			addContact() {
				uni.showModal({
					title: '提示',
					content: '跳转到新增联系人页面？',
					success: (res) => {
						if (res.confirm) {
							console.log('跳转到新增页面');
							uni.navigateTo({
								url: '/pages/elderlyInterface/goto/modiftFamily'
							});
						}
					}
				});
			},
			deleteContact(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个联系人吗？',
					success: (res) => {
						if (res.confirm) {
							this.contactList.splice(index, 1);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.MainBox {
		width: 100vw;
		min-height: 100vh;
		background-color: #fffaf5;
		padding-bottom: 100px;
	}

	.nav-bar {
		height: 88px;
		background: linear-gradient(135deg, #ffecd2 0%, #ffd5b8 100%);
		display: flex;
		align-items: center;
		padding: 0 20px;
		border-bottom: 1px solid #ffd5b8;
		box-shadow: 0 2px 12px rgba(255, 125, 0, 0.08);
	}

	.back-btn {
		font-size: 24px;
		color: #ff7d00;
		font-weight: bold;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 125, 0, 0.1);
	}

	.page-title {
		font-size: 18px;
		font-weight: 600;
		color: #ff7d00;
		margin-left: 15px;
	}

	.contact-list {
		padding: 20px;
	}

	.PersonalInformation {
		padding: 24px 20px;
		background: #ffffff;
		border-radius: 16px;
		box-shadow: 0 4px 16px rgba(255, 125, 0, 0.08);
		margin-bottom: 16px;
		border: 1px solid #ffedd5;
		position: relative;
		transition: all 0.3s ease;
	}

	.PersonalInformation:active {
		transform: scale(0.98);
		box-shadow: 0 2px 8px rgba(255, 125, 0, 0.12);
	}

	.inputItem {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		height: 48px;
		border-bottom: 1px solid #ffedd5;
	}

	.inputItem:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.textBox {
		width: 90px;
		font-size: 15px;
		color: #ff7d00;
		font-weight: 500;
		margin-right: 15px;
	}

	.text {
		flex: 1;
		font-size: 15px;
		color: #666;
		padding: 0 5px;
	}

	.delete-btn {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #ffe4d6;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}

	.delete-icon {
		color: #ff7d00;
		font-size: 20px;
		font-weight: bold;
		line-height: 1;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80px 20px;
		text-align: center;
	}

	.empty-text {
		font-size: 16px;
		color: #ffa94d;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.empty-tip {
		font-size: 14px;
		color: #ffb366;
	}

	.editBar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 -2px 12px rgba(255, 125, 0, 0.08);
		border-top: 1px solid #ffedd5;
	}

	.editBtn {
		flex: 1;
		height: 48px;
		border: none;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.editBtn:active {
		transform: scale(0.95);
	}

	.delete-btn {
		background: #ffe4d6;
		color: #ff7d00;
		margin-right: 12px;
	}

	.add-btn {
		background: linear-gradient(135deg, #ffb366 0%, #ff7d00 100%);
		color: #ffffff;
		margin-left: 12px;
		box-shadow: 0 4px 12px rgba(255, 125, 0, 0.3);
	}
	.PersonalInformation {
		animation: fadeInUp 0.5s ease;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>